<template>
  <div class="CallRecords-container">
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <el-form  label-width="82px"  label-position="right"  ref="formLabelAlign"  :model="formLabelAlign">
        <el-form-item label="顾问">
          <el-input v-model="formLabelAlign.userWords" placeholder="姓名/手机号均可"></el-input>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="formLabelAlign.customerWords" placeholder="姓名/手机号均可"></el-input>
        </el-form-item>
        <el-form-item label="呼叫类型">
          <el-select v-model="formLabelAlign.type" id="time"  placeholder="请选择呼叫类型">
            <!-- <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
            <el-option label="不限" value=""></el-option>
            <el-option label="呼入" value=1></el-option>
            <el-option label="呼出" value=2></el-option>
            <el-option label="未接通" value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-select  v-model="formLabelAlign.dayType"  id="time"  @change="holderQuJian"  placeholder="时间">
            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value1" label="时间区间" v-show="isShow">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="BTN">
          <el-button style="background-color:#c73e3a;color:#fff" @click="checkCus" :disabled="disTBN" class="check">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="通话记录" name="1" >
        <!-- <p class="titleWithLine"><i class="el-icon-arrow-down"></i> 通话记录</p> -->
        <el-table  :data="JiLuData"  style="width: 100%;margin-top:10px;"  v-loading="loading"   border>
          <el-table-column prop="userName" label="顾问"  ></el-table-column>
          <el-table-column label="归属">
            <template slot-scope="scope">
              <p class="ell">{{ scope.row.parentName2 }}{{scope.row.parentName3 | panKong}}{{scope.row.parentName4 |panKong}}</p>
            </template> 
          </el-table-column>
          <el-table-column prop="customerName" label="客户姓名"  align="center"></el-table-column>
          <el-table-column label="客户手机号"  align="center">
            <template slot-scope="scope">{{scope.row.phone | phoneNum}}</template> 
          </el-table-column>
          <el-table-column label="呼叫类型"  align="center"><template slot-scope="scope">{{ scope.row.type | TongHuaType }}</template></el-table-column>
          <el-table-column label="通话时长"  align="center"><template slot-scope="scope">{{ scope.row.duration | GuoLvShiChang }}</template></el-table-column>
          <el-table-column label="通话时间"  align="center"><template slot-scope="scope">{{ scope.row.callTime | formatTime }}</template></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="pageConfig.currentPage"  :page-sizes="[5,10,20,50]"  :page-size="pageConfig.pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total="pageConfig.total"></el-pagination>
      </el-collapse-item>
      <el-collapse-item title="通话录音" name="2">
        <el-table  :data="LuYinData"  style="width: 100%;margin-top:10px;"  v-loading="loading"  border>
          <el-table-column prop="userName" label="顾问"  ></el-table-column>
          <el-table-column label="归属">
            <template slot-scope="scope">
              <p class="ell">{{ scope.row.parentName2 }}{{scope.row.parentName3 | panKong}}{{scope.row.parentName4 | panKong}}</p>
            </template> 
          </el-table-column>
          <el-table-column prop="customerName" label="客户姓名"  align="center"></el-table-column>
          <el-table-column label="客户手机号"  align="center">
            <template slot-scope="scope">{{scope.row.phone | phoneNum}}</template> 
          </el-table-column>
          <el-table-column label="通话时间"  align="center"><template slot-scope="scope">{{ scope.row.callTime | formatTime }}</template></el-table-column>
          <el-table-column  label="通话录音"  align="center">
              <!-- <template slot-scope="scope"><a  size="mini" @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-video-play">播放</i></a></template> -->
              <template slot-scope="scope">
                <!-- <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small" disabled><i class="el-icon-video-play">暂不支持AMR格式</i></el-button> -->
                <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small" ><i class="el-icon-video-play">播放</i></el-button>
                <el-button @click="download(scope.$index, scope.row)" type="text" size="small" ><i class="el-icon-download">下载</i></el-button>
                </template>
          </el-table-column>
          
        </el-table>
        <p>正在播放: {{this.currentplayer.customerName}}--{{this.currentplayer.callTime | formatTime }}</p>
        <!-- <audio ref='audio' style="width:100%" autoplay controls crossorigin playsinline><source :src="audio_url" type="audio/ogg" /> 当前浏览器不支持播放音频，请使用chrome试试嘛 </audio> -->
        <!-- <audio style="width:100%" autoplay loop controls><source :src="audio_url" type='audio/mp3' /></audio> -->
        <audio style="width:100%" ref='audio' controls autoplay name="media" ><source :src="audio_url" type="audio/mpeg/ogg"></audio>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pageConfig2.currentPage2"
          :page-sizes="[5,10,20,50]"
          :page-size="pageConfig2.pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig2.total2"
        ></el-pagination>
        <!-- 插入音频 -->
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
//导入转码插件 amr
// import BenzAMRRecorder from 'benz-amr-recorder'
// var amr = new BenzAMRRecorder();
// 导入时间戳
import moment from "moment";
import { log } from "util";
export default {
  name: "CallRecords",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      currentplayer:{
          customerName:"未选客户",
          type:"",
          callTime:"未知时间",
      },
      activeNames: ['1','2'],
      showTimeKind: true,
      value1: "",  //未分割的完整版时间区间
    //   audio_url: "http://65.ierge.cn/12/186/372266.mp3",  //音频路径
    //   audio_url: "http://m8.music.126.net/20191224190823/435e8babd4fb92a36229f85d7dfbcd7a/ymusic/565d/515c/0652/a7782dd68af6805cee981862be3d51c0.mp3",  //音频路径12.14下午
      audio_url: "",  //音频路径12.14下午
      //时间区间隐藏状态
      isShow: false,
      loading:false,
      pageConfig: {//表一页码参数
        currentPage: 1, //当前页
        pageSize: 5, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      pageConfig2: {//表二页码参数
        currentPage2: 1, //当前页
        pageSize2: 5, //当前单页数据条数
        total2: 0 //请求到的数据总条数
      },
      kindtimeList: [
        { id: "beizhuTime", name: "备注时间" },
        { id: "fenpeiTime", name: "分配时间" }
      ],
      //时间选择生成内容
      timeList: [
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //禁用按钮的状态值
      disTBN:false,
      //客户筛选区域数据
      formLabelAlign: {
        userWords : "", //	顾问姓名
        customerWords: "", //	客户姓名
        time: "", //	消耗时间
        timeType: "", //时间类型
        type: "", //呼叫类型
        dayType: "sevenDay",  //默认七天
        beginTime: "", //开始时间
        endTime: "", //	结束时间
        pageSize: "", //分页大小
        currentPage: "" //	当前页码
      },
      formLabelWidth: "180px",
      // 表格依赖于数据没有数据  会一行都没有
      JiLuData: [  ],
      LuYinData: [  ],
    };
  },
  methods: {
    //获取通话记录的方法
    getLuYinList() {
      this.loading = true
      this.disButton()
      this.$axios
        .post(
          `/spider/call/getCallRecord?userWords=${this.formLabelAlign.userWords}&customerWords=${this.formLabelAlign.customerWords}&userId=${this.currentUser.currentid}&type=${this.formLabelAlign.type}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}&currentPage=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}&currentPage2=${this.pageConfig2.currentPage2}&pageSize2=${this.pageConfig2.pageSize2}`
        )
        .then(res => {
          // console.log(res);
        //   let dataModel = res.data.dataModel;
          if (res.data.messageModel.code == 0) {
            //通话记录
            this.JiLuData = res.data.dataModel.list;
            this.pageConfig.total = res.data.dataModel.total;
            //通话录音
            this.LuYinData = res.data.dataModels.list
            this.pageConfig2.total2 = res.data.dataModels.total;
            this.loading = false
          } else {
            this.$message.error(res.data.messageModel.messageText);
            //通话记录
            this.JiLuData = [];
            this.pageConfig.total = 0;
            //通话录音
            this.LuYinData = []
            this.pageConfig2.total2 = 0;
            this.loading = false
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleChange(val) {//折叠表格方法
        // console.log(val);
    },
    //播放
    handleClick(index, row){
        // console.log(row.recordingurlMP3);
        this.$refs.audio.src = "http://" + row.recordingurlMP3; //动态渲染
        // this.audio_url = row.recordingurlMP3  //动态渲染
        this.currentplayer.customerName = row.customerName ;
        this.currentplayer.callTime = row.callTime
        this.currentplayer.type = row.type
        //转码amr的方法
        // var amr = new BenzAMRRecorder();
      //   amr.initWithUrl(row.recordingurl).then(function() {
		  //   // amr.isPlaying() 返回音频的播放状态 是否正在播放 返回boolean类型
		  //   console.log(amr.isPlaying())
		  //   if(amr.isPlaying()){
		  //     amr.stop();
		  //   } else {
		  //     amr.play();
		  //   }
		  // });
    },
    //下载
    download(index, row){
      // window.location.href = row.recordingurlMP3
      window.open("https://" +  row.recordingurlMP3,"_blank");  
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign.formLabelAlign[i] = "";
      }
      this.value1 = ""; //未分割的完整版时间区间
    },
    //将按钮禁用两秒
    disButton(){
      this.disTBN = true
      setTimeout(() => {
        this.disTBN = false
      }, 2000);
    },
    //判断时间种类是否禁用
    hiddenTimeKind(vId) {
      let obj = {};
      obj = this.kindtimeList.find(item => {
        //这里的fenselectList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj);
      if (obj.name == "") {
        this.showTimeKind = true;
      } else {
        this.showTimeKind = false;
      }
    },
    //判断时间区间是否隐藏
    holderQuJian(vId) {
      let obj = {};
      obj = this.timeList.find(item => {
        return item.id === vId; //筛选出匹配数据
      });
      if (obj.id == "customize") {
        this.isShow = true;
        this.formLabelAlign.dayType = "customize";
      }  else {
        this.isShow = false;
        this.value1 = ""
      }
    },
    //分页的方法
    handleSizeChange(val) {
      // console.log(val);
      if (this.pageConfig.currentPage != 1) {
        this.pageConfig.currentPage = 1;
        this.pageConfig.pageSize = val;
        this.getLuYinList();
      } else {
        this.pageConfig.pageSize = val;
        this.getLuYinList();
      }
    },
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getLuYinList();
      // }
    },
    handleSizeChange2(val) {
      // console.log(val);
      if (this.pageConfig2.currentPage2 != 1) {
        this.pageConfig2.currentPage2 = 1;
        this.pageConfig2.pageSize2 = val;
        this.getLuYinList();
      } else {
        this.pageConfig2.pageSize2 = val;
        this.getLuYinList();
      }
    },
    handleCurrentChange2(val) {
      this.pageConfig2.currentPage2 = val;
      this.getLuYinList();
      // }
    },
    //查询
    checkCus() {
      if (this.formLabelAlign.userWords == "" && this.formLabelAlign.customerWords == "") {
        this.$message.error("顾问或客户名称不能同时为空，请至少填写一个");
        return false;
      }
      this.loading = true
      // if (this.cityId.length == 0) {  this.$message.error("请选择城市进行查询");  return false}
      if (this.value1 != "" || this.formLabelAlign.dayType == "customize") {
        this.formLabelAlign.beginTime = this.value1[0];
        this.formLabelAlign.endTime = this.value1[1];
        if (this.formLabelAlign.beginTime == this.formLabelAlign.endTime) {
          this.formLabelAlign.beginTime = this.formLabelAlign.beginTime + " " + "00:00:00";
          this.formLabelAlign.endTime = this.formLabelAlign.endTime + " " + "23:59:59";
        }
      } else {
        this.formLabelAlign.beginTime = "";
        this.formLabelAlign.endTime = "";
      }
      this.getLuYinList()
    },
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    //   return moment(value).format("YYYY-MM-DD");
    },
    phoneNum(val){  //页面对号码简单加密
      if (val != null ) {
        return val.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")
      }else{
        return ""
      }
    },
    quZheng(val){
      return Math.ceil(val)
    },
    GuoLvShiChang(val){
        return Number(parseInt(val/60)) + "分" + Number(val%60) + "秒"
    },
    panKong(val) {
      if (val != null) {
        return "--" + val
      }else{
        return ""
      }
    },
    TongHuaType(val){
        if (val == 1) {
            return "呼入"
        }else if (val == 2) {
            return "呼出"
        }else if (val == 3) {
            return "未接通"
        }else{
            return "状态未知"
        }
    }
  },
  created() {
    this.currentUser.currentName = window.sessionStorage.getItem("name")
    this.currentUser.currentid = window.sessionStorage.getItem("id")
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel")
    // this.currentUser.currentcity = window.sessionStorage.getItem("departmentName1")
    this.currentUser.currentPhone = window.sessionStorage.getItem("phone")
    // this.formLabelAlign.dayType = "sevenDay"
    this.$message('请先输入顾问名称进行查询');
    //获取通话记录
    // this.getLuYinList();
    //动态设置音频路径
    // this.$refs.audio.src = this.audio_url
    // this.audio_url = "http://m8.music.126.net/20191224190823/435e8babd4fb92a36229f85d7dfbcd7a/ymusic/565d/515c/0652/a7782dd68af6805cee981862be3d51c0.mp3"
    

  }
};
</script>

<style  lang='scss'>
.CallRecords-container {
    padding: 20px;
    // margin: 0;
    //折叠图标
    .el-collapse-item__arrow {
        margin-left: 5px;
        font-weight: 900;
    }
    .el-collapse-item {
        th {
            background-color: #D7D7D7;
        }
        .el-collapse-item__header{
          background-color:#a0c5e8;
          height: 30px;
          border-radius: 3px;
          margin-bottom: 10px;
        }
    }
    .titleWithLine{
        border-bottom: 1.2px solid rgb(189, 189, 189);
    }
  .el-dialog {
    // width: 35%;
    #dateOfBirth {
      /deep/.el-input__inner {
        padding-left: 30px !important;
      }
    }
    .el-form-item {
      margin-bottom: 5px;
      /deep/.el-form-item__label {
        width: 150px !important;
      }
      /deep/.el-form-item__content {
        margin-left: 150px !important;
      }
    }
  }
  .el-form-item.BTN {
    /deep/.el-form-item__content {
      margin-left: 20px !important;
    }
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }

  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    border: 1px solid grey;
    position: relative;
    .cell {
      padding:0 2px;
    }
    .el-table_9_column_83 {
      position: relative;
    }
    .el-table_9_column_84 {
      margin-left: 10px;
    }
    td {
      //取消单元格的上下padding
      padding: 0;
      border-right: 1px solid grey;
      border-bottom: 1px solid grey;
    }
    th {
      //取消单元格的上下padding
      padding: 0;
      border-right: 1px solid grey;
      border-bottom: 1px solid grey;
      .cell {
      text-align: center;
    }
    }
    
    .el-button--mini {
      border: 0;
      padding: 5px 15px;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.01);
    }
    .toEdit:hover {
      color: skyblue;
    }
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    // width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin: 3px 0 3px 10px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .check {
    margin-left: 22px;
    padding: 8px 20px;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    // line-height: 0.9;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
  //多选框
  #bigBox {
    margin-top: 20px;
    #give {
      width: 41px;
      margin-left: 51px;
      font-size: 14px;
    }
    .el-checkbox {
      margin-right: 8px;
    }
    .duoxuankuang {
      margin-right: 10px;
    }
  }
}
</style>